<!DOCTYPE html>

<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>轻音少女介绍</title>
  <link rel="stylesheet" href="Test.css">
</head>
<body>
<!-- 侧边导航栏 -->
<nav  class="sidebar">
  <ul>
    <li><a href="#intro">简介</a></li>
    <li><a href="#characters">人物介绍</a></li>
    <li><a href="#gallery">图片展示</a></li>
    <li><a href="#about">关于作品</a></li>
  </ul>
</nav>

<!-- 主要内容区域 -->
<main>
  <!-- 简介部分 -->
  <section id="intro" class="section intro-section">
    <h1>轻音少女</h1>
    <p>
      《轻音少女》（けいおん！）是由京都动画制作的校园音乐题材动画，讲述了四位高中女生组建轻音部并一起演奏音乐的故事。
      作品以其轻松愉快的氛围和可爱的角色深受观众喜爱。
    </p>
  </section>

  <!-- 人物介绍部分 -->
  <section id="characters"  class="section characters-section">
    <h2>人物介绍</h2>
    <div  class="character-card">
      <img src="https://via.placeholder.com/150" alt="Yui Hirasawa">
      <h3>平泽唯（Yui Hirasawa）</h3>
      <p>轻音部的主唱兼吉他手，性格天然呆，但音乐天赋极高。</p>
    </div>
    <div  class="character-card">
      <img src="https://via.placeholder.com/150" alt="Ritsu Tainaka"  class="character-img">
      <h3>田井中律（Ritsu Tainaka）</h3>
      <p>轻音部的鼓手，性格活泼开朗，是团队的开心果。</p>
    </div>
    <div  class="character-card">
      <img src="https://via.placeholder.com/150" alt="Mio Akiyama"  class="character-img">
      <h3>秋山澪（Mio Akiyama）</h3>
      <p>轻音部的贝斯手，性格内向，但演奏技术非常出色。</p>
    </div>
    <div>
      <img src="https://via.placeholder.com/150" alt="Tsumugi Kotobuki" class="character-img">
      <h3>琴吹䌷（Tsumugi Kotobuki）</h3>
      <p>轻音部的键盘手，性格温柔，家境富裕，是团队的大姐姐。</p>
    </div>
  </section>

  <!-- 图片展示部分 -->
  <section id="gallery" class="section gallery-section">
    <h2>图片展示</h2>
    <div  class="gallery-container">
      <img src="https://via.placeholder.com/400x300" alt="Gallery Image 1">
      <img src="https://via.placeholder.com/400x300" alt="Gallery Image 2">
      <img src="https://via.placeholder.com/400x300" alt="Gallery Image 3">
    </div>
  </section>

  <!-- 关于作品部分 -->
  <section id="about" class="section about-section">
    <h2>关于作品</h2>
    <p>
      《轻音少女》以其轻松愉快的校园生活和动人的音乐表演，成为一部经典的治愈系动画。
      作品通过四位少女的成长故事，展现了友情、梦想和青春的美好。
    </p>
  </section>
  <a href="javascript:history.back()">返回</a>
</main>

<!-- 页脚 -->
<footer>
  <p>&copy; 2023 轻音少女介绍页面. 所有图片和内容仅供参考。</p>
</footer>
</body>
</html>